<template>
  <div class="houses">
    <HerderMain :title="'房间列表'" />
    <div class="filter-form">
      <el-form ref="formline" size="small" v-model="formline" :inline="true">
        <el-form-item label="楼栋ID:">
          <CascaderSelect style="width: 100px" @changeBuildId="getBuildId" />
        </el-form-item>
        <el-form-item label="房间号:">
          <el-input
            v-model="formline.key"
            clearable
            maxlength="6"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间类型:">
          <el-input v-model="formline.type" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="房屋面积范围:">
          <el-input
            v-model="formline.areas"
            maxlength="7"
            style="width: 90px"
          ></el-input>
          -
          <el-input
            v-model="formline.areas2"
            maxlength="7"
            style="width: 90px"
          ></el-input>
        </el-form-item>
        <el-form-item label="房屋朝向:">
          <el-select v-model="formline.orientation" style="width: 100px">
            <el-option
              v-for="item in ['东', '西', '南', '北']"
              :key="item"
              :label="'朝' + item"
              :value="'朝' + item"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="formline.orientation"
            style="width:90px;"
          ></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getHouseList">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="filter-option">
        <el-button type="primary" size="mini" @click="addShow(true, '添加房屋')"
          >添加</el-button
        >
        <el-button type="danger" size="mini">删除</el-button>
      </div>
    </div>
    <Table
      :loading="loading"
      :tableData="houseList"
      :tableHead="tableHead"
      :btnUpdate="$utils.getPower('房间', '修改')"
      @updateNotice="addShow"
      @deleteNotice="deleteHouse"
      @multipleSelection="multipleSelection"
    />
    <HouseDialog :show="showDialog" @close="addShow" />
    <Pagination
      :pageSize="formline.psize"
      :total="total"
      @changePage="getHouseList"
    />
  </div>
</template>

<script>
import Table from "../components/common/Table.vue";
import CascaderSelect from "./../components/building/cascader.vue";
import HouseDialog from "./../components/house/dialog.vue";
import HerderMain from "./../components/herderMain.vue";
import Pagination from "./../components/common/page1.vue";
import http from "./../api/houses";
export default {
  components: {
    CascaderSelect,
    HerderMain,
    Table,
    Pagination,
    HouseDialog,
  },
  data() {
    return {
      loading: true,
      titleFlag: "",
      showDialog: false,
      updateData: {},
      houseList: [], //table表格数据
      formline: {
        key: "", //搜索关键字
        areas: "", //房间面积范围1
        areas2: "", //房间面积范围2
        orientation: "", //房朝向
        type: "", //房间类型(如：3室)
        buildingid: "", //楼栋ID
        page: 1, //页数
        psize: 10, //每页显示多少条
      },
      addForm: {
        id: 0,
        buildingid: -1,
        houseno: "",
        areas: "",
        type: "",
        orientation: "",
      },
      total: 0,
      tableHead: [
        //表头项
        {
          label: "房间ID",
          prop: "id",
        },
        {
          label: "楼号",
          prop: "building",
        },
        {
          label: "房间号",
          prop: "houseno",
        },
        {
          label: "面积(平方米)",
          prop: "areas",
        },
        {
          label: "房间类型",
          prop: "type",
        },
        {
          label: "朝向",
          prop: "orientation",
        },
        {
          label: "操作",
          type: "button",
          button: {
            update: this.$utils.getPower("房间", "修改"),
            delete: this.$utils.getPower("房间", "删除"),
          },
        },
      ],
    };
  },
  created() {
    this.getHouseList(this.formline);
  },
  methods: {
    getBuildId(id) {
      console.log("buildingid", id);
      this.formline.buildingid = id;
    },
    async getHouseList(params) {
      console.log(params);
      let formline = this.formline;
      if (params) {
        formline = Object.assign(this.formline, params);
      }
      const { data } = await http.housesList(formline);
      this.houseList = data.list;
      this.total = data.counts;
      this.loading = false;
    },
    onSearch() {
      console.log(this.formline);
    },
    addShow(show, title, data, flag) {
      console.log(show, title, data, flag);
      this.showDialog = show;
      title && this.$store.commit("houses/SET_TITLE", title);
      if (show) {
        // 添加时
        if (!data) {
          this.$store.commit("houses/SET_ADDFORM", {
             areas: '',
            building:'',
            buildingid: -1,
            houseno: '',
            id: 0,
            orientation:'',
            type: '',
          });
        } else {
          // 修改
          this.$store.commit("houses/SET_ADDFORM", {
            areas: data.areas,
            building: data.building,
            buildingid: data.buildingid,
            houseno: data.houseno,
            id: data.id,
            orientation: data.orientation,
            type: data.type,
          });
          console.log(data)
        }
      } else {
        flag && this.getHouseList();
        this.$store.commit("houses/SET_ADDFORM", {
            areas: '',
            building:'',
            buildingid: -1,
            houseno: '',
            id: 0,
            orientation:'',
            type: '',
        });
      }
    },
    deleteHouse(date) {
      const { id } = date;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await http.Delhouses({ id });
          this.getHouseList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    multipleSelection(val) {},
  },
};
</script>


<style lang="less">
.filter-form {
  padding: 20px 0;
}
.filter-option {
  margin: 10px 0;
  &.el-button {
    margin-right: 15px;
  }
}
</style>